<template>
  <div>
      <div class="search_wrap">
      <div style="display: flex;">
        <el-input v-model="searchText"></el-input>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </div>
      <div>
        <el-button type="success" @click="open">添加</el-button>
      </div>
      
    </div>
    <div class="table_wrap">
      <table-title title="视频列表"></table-title>
      <el-table border stripe :data="videoList">
        <el-table-column label="视频名称" prop="Vname"></el-table-column>
        <el-table-column label="绑定课程" prop="Vstate"></el-table-column>
        <el-table-column label="视频时长" prop="Vtime"></el-table-column>
        <el-table-column label="发布日期">
           <template #default="{row}">
            <div>
               {{ new Date(row.createAt).toLocaleString() }}
            </div>
           </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <div>
               <el-link type="primary" @click="toSendRow(row)">编辑</el-link>
                <el-link type="danger" @click="toDel(row.ID)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="total" :page-size="pageSize" layout="prev,pager,next" background 
      @current-change="pageChange"></el-pagination>
    </div>
    <!-- 视频弹出层 -->
    <videoDialog ref="videoDia"></videoDialog>
  </div>
</template>
<script>
import videoDialog from './child/videoDialog.vue';
// 导入获取视频列表接口
import { getVideoListApi ,deleteVideoApi} from '@/api/video';
export default {
   components:{videoDialog},
   data(){
    return {
      searchText:"", //搜索字段
      pageStart:1,
      total:0,//视频总数
      pageSize:3,//每页显示条数
      videoList:[]//视频列表
    }
   },
   created(){
    this.getList();
   },
   methods:{
    toSendRow(row){ //点击编辑 获取子组件 
      // 调用子组件的方法 传递当前行数据并回显
        this.$refs.videoDia.toEdit(row)
    },
    toSearch(){ //搜索
     this.getList()//重新获取视频列表
     this.searchText=""
    },
    pageChange(page){//分页改变事件
      // page---当前页码
      this.pageStart=page;
      this.getList() //重新获取视频列表
    },
    open(){
      // 获取到子组件 改变子组件数据
        this.$refs.videoDia.videoFlag=true;//打开弹出层
    },
    async getList(){ //获取视频列表
        let res=await getVideoListApi({
          searchText:this.searchText, //搜索字段
          pageStart:this.pageStart,//当前页码
        });
        console.log(res,"视频列表" )
        if(res.success){
          this.videoList=res.data.list;
          this.total=res.data.count; 
          this.pageSize=res.data.pageSize;
        }
    },
   async toDel(ID){ //删除接口
       let res=await deleteVideoApi(ID)
       this.$message.success("删除成功")
       this.getList()//重新获取视频列表
    }
   }
}
</script>
<style lang="scss" scoped>
    .search_wrap{
      width: 800px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
    }
    .table_wrap{
      width: 800px;
        margin: 20px auto;
    }
</style>